<template>
    <div>
        <el-table :data="tableData" stripe style="width: 100%" max-height="600" @selection-change="handleSelectionChange"
            ref="multipleTableRef" :header-cell-style="{
                'height': '.4167rem',
                'background': '#3F7233',
                'color': '#FFFFFF',
                'font-size': '.0833rem',
                'text-align': 'center'
            }" :cell-style="{ 'text-align': 'center' }" empty-text="请添加商品">
            <el-table-column type="selection" width="120">
            </el-table-column>
            <el-table-column label="图片" width="180">
                <template #default="scope">
                    <el-image style="width: .5208rem; height: .5208rem; border-radius: .0313rem;" :crossorigin="null" :src="scope.row.goods.image" />
                </template>
            </el-table-column>
            <el-table-column label="商品名称">
                <template #default="scope">
                    <div class="goods-name">
                        {{ scope.row.goods.name }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="产品编号">
                <template #default="scope">
                    <div class="goods-sn">
                        {{ scope.row.goods.sn }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="数量">
                <template #default="scope">
                    <div class="goods-num">
                        <el-input-number v-model="scope.row.goods_num" :min="1" @change="handleChange(scope.row)" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="售价">
                <template #default="scope">
                    <div class="goods-price">
                        ￥{{ scope.row.goods.price * scope.row.goods_num }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index, scope.row)">
                        <div class="goods-del">
                            删除
                        </div>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="all-cont">
            <el-button @click="toggleSelection(tableData)">全选</el-button>
            <el-button @click="toggleSelection()">取消全选</el-button>
            <el-button>删除</el-button>
        </div>
        <div class="tip-cont">
            <p>说明:此价格不含税费、不含包装材料费、不含打托打包费、不含物流运输费、不含上门安装费不含提货。</p>
            <div>
                <p>已选择商品:</p>
                <p>{{ multipleSelection.length }}件</p>
                <p>合计:</p>
                <i>￥{{ totalprices }}</i>
            </div>
        </div>

        <div class="submit">
            <div class="submit-cont" @click="handlesubmit">
                提交订单
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { computed, ref } from 'vue';
import { UserCartList } from '../../../api/user'
import { CartUpdate, CartDel, CartAll, CartSel, CartSubmit } from '../../../api/goods'
import { useUser } from '../../../store/user';
import { debounce } from '../../../utils/debounce'
import { ElMessage } from 'element-plus';
const multipleTableRef = ref()
const multipleSelection = ref([])
const user = useUser()
const emit = defineEmits()
let { token } = user.userinfo
// 页码
const total = ref(0)
// 表格数据
const tableData = ref([])
let res = await UserCartList(token)
let { count, lists } = res.data.data
total.value = count
tableData.value = lists
// 删除按钮
const deleteRow = (index, row) => {
    tableData.value.splice(index, 1)
    let { id } = row
    CartDel(id, token).then(res => {
    })
}
// 全选按钮
const toggleSelection = (rows) => {
    if (rows) {
        rows.forEach((row) => {
            multipleTableRef.value.toggleRowSelection(row, undefined)
        })
        CartAll(1, 1, token)
    } else {
        multipleTableRef.value.clearSelection()
        CartAll(1, 0, token)
    }
}
// 数字选择
const handleChange = debounce((value) => {
    let { id, goods_num } = value
    CartUpdate(id, goods_num, token)
}, 1000)
// 修改选中状态
const cartid = ref(0)
const handleSelectionChange = (val) => {
    multipleSelection.value = val
    if (val.length > 0) {
        let { id } = val[val.length - 1]
        cartid.value = id
        CartSel(0, 1, id, token).then(res => {
        })

    }
}

const handlesubmit = debounce(() => {
    if (multipleSelection.value.length > 0) {
        CartSubmit(token).then(res => {
            emit('update:modelValue', 2)
        })
    } else {
        ElMessage.info("请选择商品")
    }
}, 1000)

// 获取总价
const totalprices = computed(() => {
    let sum = 0
    multipleSelection.value.forEach(obj => {
        sum += obj.goods_num * obj.goods.price
    })
    return sum
})
</script>

<style scoped lang="scss">
.goods-name,
.goods-sn {
    font-size: .0833rem;
    font-weight: 400;
    color: #333333;
}

.my-paging {
    margin-top: .1563rem;
}

.goods-price {
    font-size: .0938rem;
    font-weight: 400;
    color: #E71A1A;
}

.goods-num {
    height: .2083rem;
    text-align: center;
    line-height: .2083rem;
    font-size: .0833rem;
    font-weight: 400;
    color: #333333;
}

.all-cont {
    height: .4167rem;
    padding-left: .2083rem;
    background: #3F7233;
    display: flex;
    align-items: center;
}

.goods-del {
    font-size: .0938rem;
    font-weight: 400;
    color: #333333;
}

.tip-cont {
    display: flex;
    padding: 0 .2083rem;
    margin-top: .1042rem;
    justify-content: space-between;
    margin-bottom: .1563rem;

    >p {
        font-size: .0729rem;
        font-weight: 300;
        color: #999999;
    }

    >div {
        display: flex;

        >p {
            margin-right: .0521rem;
            font-size: .0833rem;
            font-weight: 300;
            color: #333333;
        }

        >i {
            font-size: .0938rem;
            font-weight: bold;
            color: #E71A1A;
        }
    }
}

.submit {
    display: flex;
    justify-content: end;

    .submit-cont {

        width: .625rem;
        height: .2083rem;
        background: #3F7233;
        border-radius: .0208rem;
        font-size: .0938rem;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        line-height: .2083rem;
        cursor: pointer;

        &:hover {
            opacity: 0.8;
        }

        &:active {
            opacity: 1;
        }
    }
}

// 隐藏全选按钮
</style>

<style>
.el-checkbox__input.is-checked .el-checkbox__inner {
    background: #3F7233;
    border-color: #3F7233;
}

.el-checkbox__inner:hover {
    border-color: #3F7233;
}

.el-table__empty-text {
    font-size: .1042rem;
    color: red;
}

.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: #3F7233;
    border-color: #FFFFFF;
}

.el-button:focus,
.el-button:hover {
    color: #3F7233;
    border-color: #3F7233;
}

.el-input-number__decrease:hover,
.el-input-number__increase:hover {
    color: #3F7233;
}

.el-table__header-wrapper .el-checkbox {
    display: none;
}
</style>
  